<template>
	<van-col :span="8">
		<div class="offer-item">
			<div class="img-wrap" :class="!item.gdsStatus||item.gdsStatus==='1'? '':'disabled'">
				<router-link :to="'/goods/detail?gdsId='+item.gdsId"><img :src="item.gdsImg" alt=""/></router-link>
				<div class="invalid" v-if="item.gdsStatus&&item.gdsStatus!=='1'">{{statuName(item.gdsStatus)}}</div>
			</div>
			<router-link :to="'/goods/detail?gdsId='+item.gdsId" class="offer-name">{{item.gdsName}}</router-link>
			<div class="bottom-wrap">
				<div>
					<span class="price" :class="!item.gdsStatus||item.gdsStatus==='1'?'':'txt-gray'" v-if="item.agentPrice"><small>￥</small><span>{{fen2Yuan(item.agentPrice as number)}}</span></span>
				</div>
			</div>
			<div class="manage-mask" v-show="showMask" @click="toggle(item)">
				<div class="mask-checkbox" :class="item.checked? 'selected':''">
					<van-icon name="circle" size="20" v-if="!item.checked"/>
					<van-icon name="checked" size="20" v-else/>
				</div>
			</div>
		</div>
	</van-col>
</template>
<style lang="scss" scoped>
.offer-item{
	background-color: var(--white-color); border-radius:8px; position:relative; margin-bottom:8px;
	.img-wrap {
		width: 100%; aspect-ratio: 1; position: relative; border-radius: 8px 8px 0 0; overflow: hidden;
		img{width:100%;height:100%}
		&.disabled{
			img{opacity: .6}
		}
		.invalid{
			position:absolute;font-size:12px;color:var(--white-color); background:rgba(0,0,0,.4);
			width:50%;height:50%;left:25%;top:25%;border-radius:50%;
			display:flex;align-items:center;justify-content:center;
		}
	}
	.offer-name{
		margin:6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;display:block;
		color:var(--font-first-color); font-size:12px; text-align: center;
	}
	.bottom-wrap{
		padding:0 10px 6px; display:flex; align-items: center;
		.price{
			color:var(--van-primary-color);margin-right:6px;
			&>small{font-size:12px;}
			&>span{font-size:14px;}
		}
	}
	.manage-mask{
		position:absolute; top:0;left:0;width:100%;height:100%; background-color: rgba(0,0,0,0); cursor:pointer; border-radius:8px;
		.mask-checkbox{
			font-size:20px; position:absolute; top:3px;right:4px;width:20px;height:20px; background:var(--white-color); border-radius:10px;
			&.selected{
				color:var(--van-primary-color);
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {FavoritesGoodsItem,} from "@/types"
import {fen2Yuan} from "@/utils/validate"
//props
const props = defineProps<{
	item:FavoritesGoodsItem,
	showMask:boolean,
}>()
//emits
const emit = defineEmits<{
	(e: 'check-change', val: boolean): void
}>()

//methods
const statuName=(val:string)=>{
	if(val==='0')	return '已下架'
	else if(val==='2')	return '区域无货'
	return ''
}
const toggle=(item:FavoritesGoodsItem)=>{
	item.checked=!item.checked
	emit('check-change',item.checked)
}
</script>